<template>
	<div class="page">
		<div class="main">
			<div class="tabs-head">
				<p 
					v-for="(item, index) in tabsList" 
					:key="index" 
					:class="{'tabs-active': currentIndex === index}" 
					@click="changeTabs(index)">
					{{item}}
				</p>
			</div>
			<div class="tabs-main">
				<XReserveInfoView 
					v-if="currentIndex === 0">
				</XReserveInfoView>
				<XMovieReserveView 
					v-else>
				</XMovieReserveView>
			</div>
		</div>

		<!-- 开厅弹窗 -->
		<div v-if="openData.isShow">
			<XMovieOpenModal 
				:data="openData"
				@on-submit="submitOpen">
			</XMovieOpenModal>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
import roomService from '@/network/service/roomService.js'
import reserveService from '@/network/service/reserveService.js'
import XSearchFilterModule from '@/components/XSearchFilterModule' //筛选
import XReserveInfoView from '@/pages/reserve/view/XReserveInfoView'
import XMovieReserveView from '@/pages/reserve/view/XMovieReserveView'

import XMovieOpenModal from '@/pages/movie/view/XMovieOpenModal' //开厅
var timer = null;
export default {
	components: {
		XSearchFilterModule,
		XMovieOpenModal,
		XReserveInfoView,
		XMovieReserveView
	},
	data() {
		return {
			currentIndex: 0,
			tabsList: ['预定信息', '影厅预定'],
			searchData: {
				searchVal: '',
				date: ''
			},
			options: {
				disabledDate (date) {
					return date && date.valueOf() < Date.now() - 86400000;
				}
			},
			openData: { //开厅
				isShow: false,
				isLoading: false,
				data: {},
				row: null,
				lockTime: ''
			},
		}
	},
	watch: {
		
		'openData.isShow': function(val) {
			let nowTime = new Date().getTime();
			let lockt = new Date(this.openData.lockTime).getTime();
			let time = lockt - nowTime - 1000;
			if (val == false) {
				clearInterval(timer);
			} else {
				timer = setInterval(() => {
					roomService.roomLock(this.movieDetailData.data.rid).then(res => {
						let result = res.data;
						let code = result.rescode;
						let resmsg = result.msg;
						if (code == 100) {
							this.openData.lockTime = resmsg;
						} else {
							this.$Message.error(resmsg);
						}
					}, error => {
						this.$Message.error('服务器异常，请稍后再试')
					})
				}, time)
			}
		}
	},
	mounted() {
		let input = $('.ivu-input');
        for(let i = 0; i < input.length; i++) {
			input[i].style.color = 'rgba(255, 255, 255, 0.6)'
		}
		this.formatNowTime();
		this.getDimensions();
	},
	// updated() {
	// 	let input = $('.ivu-input');
    //     for(let i = 0; i < input.length; i++) {
	// 		input[i].style.color = 'rgba(255, 255, 255, 0.6)'
    //     }
	// },
	methods: {
		changeDate(val) {
			this.searchData.date = val;
		},
		changeTabs(index) {
			this.currentIndex = index;
		},
		formatNowTime() {
			var date = new Date();
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());
			this.searchData.date = Y + M + D;
			console.log(this.searchData.date)
		},
		clickSearch(formData, index) {
			this.scales[index] = formData.did
			for(let i = 0; i < this.$refs.search.length; i++) {
				this.$refs.search[i].getDimensionDetails();
			}
		},
		clickPreview(item, index) {
			this.movieDetailData.isShow = true;
			this.movieDetailData.data = item;
			this.cardIndex = index;
			switch(item.status){
				case 1:
					this.cardBg = 'leisurebg';
				break;
				case 2:
					this.cardBg = 'clearbg';
				break;
				case 3:
					this.cardBg = 'usingbg';
				break;
				case 4:
					this.cardBg = 'maintainbg';
				break;
			}
		},
		clickAction(type, formData) {
			switch(type) {
				case '开厅': 
					this.openData.data = {
						id: null,
						phoneNum: null,
						name: null,
						isMember: null,
						memberId: null,
						cardNo: null,
						number: null,
						isBook: null,
						bookNo: null,
						hours: null,
						movie: null
					};
					this.roomLock(formData);
					this.openData.row = formData;
				break;
			}
		},
		submitOpen(formData) {
			this.roomOpen(formData);
		},

		getDimensions () {
			roomService.getDimensions().then(res =>{
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.searchFilterData = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomLock () {
			roomService.roomLock(this.movieDetailData.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.openData.lockTime = resmsg;
					this.openData.isShow = true;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomOpen(formData) {
			this.openData.isLoading = true;
			let params = {
				id: formData.id,
				oid: formData.oid
			}
			roomService.roomOpen(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.getRoomList();
					this.openData.isShow = false;
					this.openData.isLoading = false;
					this.movieDetailData.isShow = false;
				} else {
					this.openData.isLoading = false;
					this.$Message.error(resmsg);
				}
			}, error =>{
				this.openData.isLoading = false;
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
	}
}
</script>

<style scoped lang="less">
.page {
	width: 100%;
	height: 100%;
	display: flex;
	.main {
		width: 100%;
		position: relative;
		.seach-filter {
			// height: 1.6rem;
			margin-bottom: .2rem;
			.search-input {
				margin-top: .3rem;
			}
		}
		.tabs-head {
			height: .5rem;
			p {
				background: rgba(255,255,255,0.1);
				border-radius: 8px 8px 0 0;
				color: rgba(255,255,255,0.6);
				float: left;
				width: 1.4rem;
				text-align: center;
				height: .5rem;
				line-height: .5rem;
				margin-right: .2rem;
				cursor: pointer;
			}
			.tabs-active {
				background: rgba(255,255,255,0.2);
				color: #ffffff;
			}
		}
		.tabs-main {
			width: 100%;
			position: absolute;
			top: 0.5rem;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255,255,255,0.2);
			border-radius: 0 .05rem .05rem .05rem;
			overflow: auto;
		}
	}
}
</style>